<template>
    <div class='hello-page'>
        <h1> {{ name }}</h1>
    </div>
</template>

<script>
export default {
    name: 'hello-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            name: "创建的vue页面"
        }
    },
    beforeCreate() {
        console.log("beforeCreate", this.name);
    },
    created() {
        console.log("created", this.name);
    }
}


</script>

<style scoped>
.hello-page {
    background: #47a1cb;
}
</style>